<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2022/6/29
  Time: 11:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台管理页面</title>
    <link href="/Web_css/background_Home.css" rel="stylesheet" type="text/css"/>
    <script src="/Web_page/JQuery.min.js"></script>
    <script src="/Web_js/background_Home.js" language="JavaScript" type="text/javascript"></script>
    <script src="/Web_page/Vue.js"></script>
</head>
<body>
<div class="body">
    <div class="home">
        <div class="login_Img">
            <img src="/Web_img/xiaomi_logo.png">
            <span>后台管理页面</span>
        </div>
        <div class="option_Content">
            <div class="title_Left">
                <div class="list">
                    <ul>
                        <li><span onclick="corresponding_Page(1)">个人中心</span></li>
                        <li><span onclick="corresponding_Page(2)">订单查看</span></li>
                        <li><span onclick="corresponding_Page(3)">商品查看</span></li>
                    </ul>
                </div>
            </div>
            <div class="correspond_Content" style="display: block">
                <div class="administrator_Information">
                <div class="personal_Information">
                    <div class="avatar">
                        <img src="/Web_img/Xiaomi_default_avatar.jpg" class="avatar_Img">
                    </div>
                </div>
                    <div class="administrator_Text">
                        <span class="administrator_Name">某某某</span><span style="display: none" class="hint_Null"></span><br>
                        <span class="date">生死看淡，不服就干；</span>
                        <span class="administrator_ID">ID:8804</span>
                    </div>
                    <div class="edit">
                        <span class="edit_Name" onclick="edit_Name(this)">编辑</span>
                    </div>
                </div>
                <div class="efficiency">
                    <div class="data">
                        <div class="individual_Data">
                            <img src="/Web_img/background_Home.png"><span>完成订单数量:<a>0</a><p>查看用户评价 ></p></span>
                        </div>
                        <div class="individual_Data">
                            <img src="/Web_img/background_Home2.png"><span>待发货订单:<a>0</a><p onclick="corresponding_Page(2)">查看待发货订单 ></p></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="order_View" style="display: none">
                <div class="order_View_Title">
                    <span>订单查看</span>
                </div>
                <div class="other_Operate">
                    <div class="search">
                        <div class="search_Input">
                            <input type="text" placeholder="请输入订单号/商品名称">
                        </div>
                        <div class="search_Img">
                            <img src="/Web_img/search_%23fff.png">
                        </div>
                    </div>
                </div>
                <div class="table">
                    <div class="list_Title">
                        <div class="unite td_Title">
                            <input type="checkbox" name="reading" class="frame one" onclick="select_All()" all="true"><span>全选</span>
                        </div>
                        <div class="td_Title">
                            <span>商品名称</span>
                        </div>
                        <div class="td_Title">
                            <span>购买数量</span>
                        </div>
                        <div class="td_Title">
                            <span>商品小计</span>
                        </div>
                        <div class="td_Title">
                            <span>操作</span><div class="other_Operations"><input type="checkbox" name="reading" onclick="this_All()" state="true" class="this_All"><span>本页全选</span></div>
                        </div>
                    </div>
                    <c:forEach var="j" begin="1" end="3" step="1">
                        <div class="list_table pages${j}" style="display: block">
                            <c:forEach var="i" begin="1" end="5" step="1">
                                <div class="list_Content">
                                    <div class="unite td">
                                        <input type="checkbox" name="reading" class="frame single Select_this${j}" itselected="false" onclick="single(this)"><span>单号:</span><a>${j}${i}</a>
                                    </div>
                                    <div class="product_Name td">
                                        <span>马桶刷</span>
                                    </div>
                                    <div class="product_Quantity td">
                                        <span>×<a>1</a></span>
                                    </div>
                                    <div class="product_Subtotal td">
                                        <span>20<a>元</a></span>
                                    </div>
                                    <div class="product_Operate td">
                                        <img src="/Web_img/ship.png" title="发货" onclick="prompt_Display(1)"> <span>|</span> <img src="/Web_img/×.png" title="取消订单" onclick="prompt_Display(2)">
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </c:forEach>
                    <script>
                        var list_table = document.getElementsByClassName("list_table")
                        for (let i = 1; i < list_table.length; i++) {
                            list_table[i].style.display = "none";
                        }
                    </script>
                    <div class="selected">
                        <img src="/Web_img/carousel_left_%23000.png" onclick="specify_Left(1)">
                        <c:forEach var="i" begin="1" end="3" step="1">
                            <div class="currently_Specified current${i}" onclick="specify(${i})">
                                ${i}
                            </div>
                        </c:forEach>
                        <img src="/Web_img/carousel_right_%23000.png" onclick="specify_Right(1)" style="margin-left: 10px">
                    </div>
                </div>
            </div>

            <div class="commodity" style="display: none">
                <div class="commodity_Title">
                    商品栏
                </div>
                <div class="function">
                    <div class="search">
                        <div class="search_Input">
                            <input type="text" placeholder="请输入订单号/商品名称">
                        </div>
                        <div class="search_Img">
                            <img src="/Web_img/search_%23fff.png">
                        </div>
                    </div>
                </div>
                <div class="table">
                    <div class="list_Title">
                        <div class="unite td_Title">
                            <input type="checkbox" class="all_Ok_No all_Head" all="true" onclick="all2()"><span>全选</span>
                        </div>
                        <div class="td_Title">
                            <span>商品名称</span>
                        </div>
                        <div class="td_Title">
                            <span>图片</span>
                        </div>
                        <div class="td_Title">
                            <span>价格</span>
                        </div>
                        <div class="td_Title">
                            <span>操作</span><div class="other_Operations"><input type="checkbox" class="this_All2" onclick="this_All2()"><span>本页全选</span></div>
                        </div>
                    </div>
                </div>
                <div class="commodity_List">
                    <c:forEach var="j" begin="1" end="3" step="1">
                        <div class="list_Pages pages${j}" style="display: block">
                            <c:forEach var="i" begin="1" end="5" step="1">
                                <div class="list_Content"><div class="unite td"><input type="checkbox" class="all_Ok_No all_Body this${j}" itselected="false" onclick="radio(this)" ><span>商品编号:</span><a>${j}${i}</a></div>
                                    <div class="product_Name td">
                                        <span>马桶刷</span>
                                    </div>
                                    <div class="product_Img td">
                                        <span><img src="/Web_img/Xiaomi_electric_toothbrush.webp"></span>
                                    </div>
                                    <div class="product_Subtotal td">
                                        <span>20<a>元</a></span>
                                    </div>
                                    <div class="product_Operate td">
                                        <img src="/Web_img/take_Down.png" title="下架此商品" onclick="prompt_Display(3,event)"> <span>|</span> <img src="/Web_img/revise.png" title="修改订单" onclick="prompt_Display(4)">
                                    </div>
                                </div>
                            </c:forEach>
                        </div>
                    </c:forEach>
                </div>
                <script>
                    var list_Pages = document.getElementsByClassName("list_Pages")
                    for (let i = 1; i < list_table.length; i++) {
                        list_Pages[i].style.display = "none";
                    }
                </script>
               <div class="page_Selection">
                   <div class="this_Page">
                       <a style="margin-left: 100px;">第</a><span class="number_Pages">1</span><a>页</a>
                   </div>
                   <div class="selected">
                       <img src="/Web_img/carousel_left_%23000.png" onclick="specify_Left(2)">
                       <c:forEach var="i" begin="1" end="3" step="1">
                           <div class="currently_Specified current${i}" onclick="block(${i})">
                                   ${i}
                           </div>
                       </c:forEach>
                       <img src="/Web_img/carousel_right_%23000.png" onclick="specify_Right(2)" style="margin-left: 10px">
                   </div>
               </div>
            </div>
        </div>
    </div>
</div>
<div class="hint_Remove" style="display:none" >
    <div class="blinded">
    </div>
    <div class="remove_Text">
        <div class="remove_Character">
            <div class="remove">
                <img src="/Web_img/×.png" class="remove_Img" onclick="prompt_Disappear(1)">
            </div>
            <h1 class="remove_Word">确认删除所选商品吗？</h1>
            <div class="delete_Button">
                <div class="remove_Button"  onclick="prompt_Disappear()">确定</div><div class="cancel" style="margin-left: 20px;"  onclick="prompt_Disappear(1)">取消</div>
            </div>
        </div>
    </div>
</div>

<div class="hint_Remove" style="display:none" >
    <div class="blinded">
    </div>
    <div class="zoom"></div>
    <div class="remove_Text" style="display: block">
        <div class="remove_Character">
            <div class="remove">
                <img src="/Web_img/×.png" class="remove_Img " onclick="prompt_Disappear(2)" style="margin-top: 10px;">
            </div>
            <div class="modify_Information">
                <div class="row">
                    <span>商品编号:</span><a>11</a>
                </div>
                <div class="row">
                    <span>商品名称:</span><input type="text">
                </div>
                <div class="row">
                    <span>商品价格:</span><input type="text">
                </div>
                <div class="row">
                    <span>商品详情:</span><textarea name="description"></textarea>
                </div>
                <div class="row">
                    <span style="margin-right: 20px;">图片:</span>
                    <div class="imgs">
                        <c:if test="1 == 2">
                            <c:forEach var="i" begin="1" end="3" step="1">
                                <img src="/Web_img/Xiaomi_fan.webp">
                            </c:forEach>
                        </c:if>
                    </div>
                    <div class="form-element-file-wapper">
                        <button type="button"><img src="/Web_img/settlement.png" style="width: 40px;height: 40px;margin-top: 10px"><p>上传照片</p></button>
                        <input type="file" class="chooseImage" accept="image/jpeg,image/png,image/gif">
                    </div>
                    <script>
                        $('.chooseImage').on('change',function(){
                            var hint_Word = document.getElementsByClassName("hint_Word")
                            var newimg = document.getElementsByClassName("newimg")
                            if (newimg.length >= 3){
                                hint_Word[0].innerText = '最多只能传三张图片！';
                                return;
                            }
                            var filePath = $(this).val();         //获取到input的value，里面是文件的路径
                            var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
                            // 检查是否是图片
                            if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
                                hint_Word[0].innerText = '请重新上传！';
                                return;
                            }
                            var src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
                            var img = document.createElement("img");
                            var imgs = document.getElementsByClassName("imgs")
                            img.className = "newimg"
                            img.src = src
                            img.setAttribute("ondblclick","zoom(this)");
                            imgs[0].appendChild(img);
                            imgs[0].style.marginLeft = "10px"
                            for (let i = 0; i < newimg.length; i++) {
                                newimg[i].style.marginLeft = "10px"
                            }
                        });
                    </script>
            </div>
                <a class="hint_Word"></a>

            <div class="delete_Button">
                <div class="remove_Button"  onclick="prompt_Disappear()">确定</div><div class="cancel" style="margin-left: 20px;"  onclick="prompt_Disappear(2)">取消</div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
